金魚都能懂的網頁切版：26、27

版面組合

https://codepen.io/mikeyam/pen/abZvZrN?editors=1000

這章節主要是把先前運用到的各個版面做組合，其中要注意地方，在做各個版面時，有寫到許多相同的 class，這時要做組合時，很容易相互影響，因此可以透過以下方式，把最外層的 class 寫在css來做區分版面。

.footer{
    padding: 150px 0 0;
    background: linear-gradient(-20deg,#3F5494,#08c7a5);
}
.footer .container{
    display: flex;
    max-width: 1200px;
    margin: auto;
}
.footer .footer-item{
    width: 0;
    flex-grow: 1;
    margin: 0 20px;
}
.footer .footer-item nav{
    display: flex;
    flex-direction: column;
}
.footer .footer-item nav a{
    color: #fff;
    line-height: 1.4;
    text-decoration: none;
    padding: 5px 0;

重構

簡單說，重構是把相同結構的 CSS，抽出來做整合，來減少肥大的程式碼。
因此，想要寫出乾淨的程式碼，是不可缺少的，就像考試一樣，答題答完時，也要做檢查一樣。